<template>
  <div>
    <div class="header">
      <div class="header-left">
        <a class="aclass" href="#"> <h1>考研资料分享系统</h1></a>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              :size="50"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/Personal"
              ><el-dropdown-item icon="el-icon-user"
                >个人中心</el-dropdown-item
              ></router-link
            >
            <router-link to="/login"
              ><el-dropdown-item icon="el-icon-switch-button"
                >退出登录</el-dropdown-item
              ></router-link
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      </div>
      <div>
        <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          text-color="black"
        >
          <el-submenu index="0">
            <template slot="title"
              ><i class="el-icon-s-unfold"></i>考研科目列表</template
            >
            <el-submenu
              v-for="(value, key, indexz) in courselist"
              :key="indexz"
              :index="indexz + 1 + ''"
            >
              <template slot="title" v-if="key == '政治'"
                ><router-link :to="'/course?sname=' + key">{{
                  key
                }}</router-link></template
              >
              <template slot="title" v-else>{{ key }}</template>
              <el-menu-item
                v-for="(item, indexs) in value"
                :key="indexs"
                :index="'/course?id=' + item.id"
                >{{ item.name }}</el-menu-item
              >
            </el-submenu>
          </el-submenu>
          <el-menu-item
            ><i class="el-icon-s-order"></i><el-link href="https://yz.chsi.com.cn/">院校资讯</el-link></el-menu-item
          >
          <el-menu-item index="home"
            ><i class="el-icon-s-opportunity"></i>每日一句</el-menu-item
          >
        </el-menu>
      </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      courselist: {},
    };
  },
  mounted: function () {
    this.createcode(); //需要触发的函数
  },
  methods: {
    createcode() {
      this.$http.get("user/subjects").then((res) => {
        this.courselist = res.data.data;
      });
    },
  },
};
</script>

<style >
.aclass {
  text-decoration: none;
  color: white;
}
.header {
  display: flex;
  justify-content: flex-end;
  background: #333;
}
.header-left {
  color: white !important;
  padding-left: 30px;
}
.header-right {
  margin-left: auto;
  padding-right: 30px;
  margin-top: 19px;
}
</style>